<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
        class="searchForm"
      >
        <FormItem label="用户名称/ID">
          <Input v-model="formItem.keyword" placeholder="请输入账号名称" style="width:180px"></Input>
        </FormItem>
        <FormItem label="红包内容">
          <Input v-model="formItem.description" placeholder="请输入账号名称" style="width:180px"></Input>
        </FormItem>
        <FormItem label="领取时间">
          <Row>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择开始时间" v-model="formItem.searchDataBegin"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <DatePicker type="date" placeholder="请选择结束时间" v-model="formItem.searchDataFinish"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <TableList
      :columns="columns"
      :data="data"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      newOne
      tableTitle="投递记录"
      @newOneFn="newOne"
      @changePage="changePage"
    ></TableList>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import { RedBagLog } from "api/recuit/user";
import Config from "@/config";
export default {
  name: "",
  data() {
    return {
      formItem: {
        keyword: "",
        description: "",
        searchDataBegin: "",
        searchDataFinish: ""
      },
      columns: [
        {
          title: "用户ID",
          key: "phone",
          width: 160
        },
        {
          title: "用户名称",
          key: "worker_nickname",
          width: 220,
          render: (h, params) => {
            return h("span",{}, params.row.worker_nickname || "未授权用户");
          }
        },
        {
          title: "红包内容",
          key: "description",
          width: 400
        },
        {
          title: "红包金额（元）",
          key: "change",
          width: 180
        },
        {
          title: "领取时间",
          key: "time_create",
          width: 500
        }
      ],

      data: [],
      page: 0,
      pageNum: 5, //显示条数
      pageTotal: 0 //页面总数
    };
  },
  components: {
    TableList
  },

  mounted() {
    this.getData();
  },

  methods: {
    //切换页面
    changePage(data) {
      let { page } = data;
      this.page = --page;
      this.getData();
    },
    //条件查询
    searchData() {
      this.page = 0;
      this.getData();
    },
    //获取数据
    getData() {
      let page = this.page;
      let formItem = this.formItem;
      let dataList = new Object();
      dataList.page = ++page;
      //获取查询条件
      for (let i in formItem) {
        dataList[i] = formItem[i];
      }

      RedBagLog(dataList).then(res => {
        let { walletLogList, page } = res;
        this.data = walletLogList;
        this.page = Number(page.page);
        this.pageTotal = page.pageTotal;
        this.pageNum = page.pageNum;
      });
    }
  }
};
</script>

<style scoped lang="less">
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.searchForm {
  .ivu-form-item {
    margin-bottom: 0;
  }
}
</style>
